<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>
            
            var CTP_WEB_FULLPATH = '../../';
        </script>
        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/toolbar.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/menus.css' rel='stylesheet' type='text/css'/>
        <link href="../../css/colormenu.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/datepicker.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/toolbar.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'>
        </script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'>
        </script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'>
        </script>		
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>		
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/colormenu/ctp.ui.colormenu.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jquery.bgiframe.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/toolbar/ctp.ui.toolbar.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/menus/ctp.ui.menus.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/datepicker/ctp.ui.datepicker.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/datepicker/ui.datepicker.js">
        </script>
		 <script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>	
        <script type='text/javascript' kind='variant'>
            var toolbar1, buttonsLayout, buttonsGroupbox, panel2, showLayout;
        </script>
        <script type='text/javascript' kind='event'>
        </script>
        <script type='text/javascript' kind='ui'>
            
            $(document).ready(function(){
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '禁用按钮',
                    width: '100%',
                    onClick: function(){
                        toolbar1.setDisable("bottom2", true, "left");
                    }
                });
                var button2 = new ctp.ui.button({
                    id: 'button2',
                    text: '启用按钮',
                    width: '100%',
                    onClick: function(){
                        toolbar1.setDisable("bottom2", false, "left");
                    }
                });
                var button3 = new ctp.ui.button({
                    id: 'button3',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: toolbar1.isDisable("bottom2", "left")
                        });
                    }
                });
                var button4 = new ctp.ui.button({
                    id: 'button4',
                    text: '设置文本',
                    width: '100%',
                    onClick: function(){
                        toolbar1.setText(2, "设置文本", "left");
                    }
                });
                var button5 = new ctp.ui.button({
                    id: 'button5',
                    text: '取得日历的值',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: toolbar1.getValue("datepicker", "left")
                        });
                    }
                });
                var button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '取得文本',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: toolbar1.getText(2, "left")
                        });
                    }
                });
                var button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '设置2个按钮不可用',
                    width: '100%',
                    onClick: function(){
                        toolbar1.setDisable(["bottom1", "bottom2"], true, "all");
                    }
                });
                var button8 = new ctp.ui.button({
                    id: 'button8',
                    text: '设置2个按钮可用',
                    width: '100%',
                    onClick: function(){
                        toolbar1.setDisable(["bottom1", "bottom2"], false, "all");
                    }
                });
                var button9 = new ctp.ui.button({
                    id: 'button9',
                    text: '取得所有ID',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: toolbar1.getItemIds("all")
                        });
                    }
                });
				var button10 = new ctp.ui.button({
                    id: 'button10',
                    text: '隐藏日历和新增按钮',
                    width: '100%',
                    onClick: function(){
                        toolbar1.hideItem(["bottom1", "datepicker"], "all");
                    }
                });
				var button11 = new ctp.ui.button({
                    id: 'button11',
                    text: '显示日历和新增按钮',
                    width: '100%',
                    onClick: function(){
                        toolbar1.showItem(["bottom1", "datepicker"], "all");
                    }
                });
				var button12 = new ctp.ui.button({
                    id: 'button12',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                        toolbar1.hide();
                    }
                });
				var button13 = new ctp.ui.button({
                    id: 'button13',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                        toolbar1.show();
                    }
                });
				var button14 = new ctp.ui.button({
                    id: 'button14',
                    text: '设置新增组件高亮显示',
                    width: '100%',
                    onClick: function(){
                        toolbar1.setActive("bottom1");
                    }
                });
				var button15 = new ctp.ui.button({
                    id: 'button15',
                    text: '删除组件',
                    width: '100%',
                    onClick: function(){
                        toolbar1.remove();
                    }
                });
                var textfield1=new ctp.ui.textfield({
                            id: 'textfield1',
                            width: '100px',
							validate: 'rules[required]'
                        });
			   var branchValidator = new ctp.validator({id:"branchFormValidator",target:textfield1});//验证框架
                toolbar1 = new ctp.ui.toolbar({
                    id: 'toolbar1',
                    border: 'bottom',					
                    leftItems: [
					{
					    id: "label1",
					    type: 'label',
					    text: '新增',
					    onClick: function(){
					    }
					} ,'-', {
                        id: "bottom1",
                        type: 'button',
                        text: '新增',
                        icon: 'add',
                        
                        onClick: function(){
                        }
                    }, '-', {
                        id: "bottom2",
                        type: 'button',
                        text: '修改',
                        icon: 'edit',
                        
                        onClick: function(){
                        }
                    }, '-', {
                        id: "bottom5",
                        type: 'textfield',
                        
                        text: '搜索：',
                        object: textfield1
                    }, '-', {
                        id: "datepicker",
                        type: 'datepicker',
                        
                        text: '日历：',
                        object: new ctp.ui.datepicker({
                            id: 'datepicker1',
                            width: '100px'
                        })
                    }, '-', {
                        id: "combobox1",
                        type: 'combobox',
                        text: '请选择：',
                        disable: false,
                        object: new ctp.ui.combobox({
                            id: 'comboboxID',
                            width: '120px',
                            items: [{
                                text: '广东省',
                                value: '广东省'
                            }, {
                                text: '四川省',
                                value: '四川省'
                            }, {
                                text: '辽宁省',
                                value: '辽宁省'
                            }, {
                                text: '北京市',
                                value: '北京市'
                            }, {
                                text: '山东省',
                                value: '山东省'
                            }, {
                                text: '江苏省',
                                value: '江苏省'
                            }, {
                                text: '重庆市',
                                value: '重庆市'
                            }, {
                                text: '云南省',
                                value: '云南省'
                            }, {
                                text: '贵州省',
                                value: '贵州省'
                            }]
                        })
                    }       
                    ],
                    rightItems: [{
                        id: "button10",
                        type: 'button',
                        text: '新增行',
                        icon: 'add-row',
                        
                        onClick: function(){
                        }
                    }, '-', {
                        id: "button11",
                        type: 'button',
                        text: 'word文档',
                        icon: 'word',
                        
                        onClick: function(){
                        }
                    }]
                });
                showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '100%',
                    height: '160px',
                    cols: 1,
                    colSpace: 2,
                    items: [[{
                        element: toolbar1
                    }]]
                });
                
                buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    }, {
                        element: button2
                    }, {
                        element: button3
                    }], [{
                        element: button4
                    }, {
                        element: button5
                    }, {
                        element: button6
                    }], [{
                        element: button7
                    }, {
                        element: button8
                    }, {
                        element: button9
                    }], [{
                        element: button10
                    },{
                        element: button11
                    },{
                        element: button12
                    }], [{
                        element: button13
                    },{
                        element: button14
                    },{
                        element: button15
                    }]]
                
                });
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [showLayout],
                    title: '效果展示区'
                });
                buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    items: [buttonsLayout],
                    width: '100%',
                    title: '功能测试区'
                });
                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'toolbar实例',
                    width: '900px',
                    height: 'auto',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.toolbar实例</b>
        <hr/>
        <br/>
    </BODY>
</html>
